<template>
  <div class="container">
    <el-dialog
      :title="$language.local(title)"
      :visible.sync="dialogClosed"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="beforeClose"
      width="62%"
    >
      <el-form
        ref="addFromRef"
        :model="addForm"
        :rules="$rules"
        label-width="100px"
        status-icon
        class="grid-flex"
      >
        <template v-for="(value, key) in dialogFormKeys">
          <template
            v-if="
              /ID|PostName|BusinessNo|PerformanceFeeSettlementRules|Status|TskType|ExportInResult|attFileName|attFilePath|TskEmpFile|Reason|checkerId|checker|otherSettlementModes/.test(
                key
              )
            "
          ></template>
          <el-form-item
            v-else-if="key === 'IsEnabled'"
            :key="key"
            :label="$language.local(key)"
            :prop="key"
          >
            <el-switch
              v-model="addForm[key]"
              :active-value="0"
              :inactive-value="1"
            ></el-switch>
          </el-form-item>
          <el-form-item
            v-else-if="/ModelContent|RRContent/.test(key)"
            :key="key"
            :label="$language.local(key)"
            :prop="key"
            class="textarea"
          >
            <!-- <xy-input v-model="addForm[key]"></xy-input> -->
            <xy-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              v-model="addForm[key]"
              clearable
            ></xy-input>
          </el-form-item>

          <el-form-item
            v-else-if="key === 'ServiceContent'"
            :key="key"
            :label="$language.local(key)"
            :prop="key"
          >
            <select-name
              v-model="addForm[key]"
              apiName="/api/Common/GetdictionaryItem?typenum=002"
              label-key="name"
              @change="serviceContentChange"
            ></select-name>
          </el-form-item>
          <el-form-item
            v-else-if="key === 'InvoiceSubject'"
            :key="key"
            :label="$language.local(key)"
            :prop="key"
          >
            <select-name
              v-model="addForm[key]"
              label-key="name"
              :model="invoiceSubjects"
            ></select-name>
          </el-form-item>
          <el-form-item
            v-else
            :key="key"
            :label="$language.local(key)"
            :prop="key"
          >
            <xy-input v-model="addForm[key]"></xy-input>
          </el-form-item>
        </template>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <slot name="footer" :form="addForm">
          <el-button type="primary" @click="onSubmit('addFromRef')">
            确 定
          </el-button>
        </slot>
      </div>
    </el-dialog>

    <!-- #endregion -->
  </div>
</template>

<script>
export default {
  inject: ["reload"],

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: Object,
    api: Object,
    title: String,
    dialogData: Object,
    formKeys: Object,
  },

  data() {
    return {
      dialogClosed: this.visible,
      addForm: this.model,
      dialogFormKeys: this.formKeys || this.model,
      banks: [],
      obj: {
        customerName: "湖南有家大科技有限公司",
        ID: 5,
        Ctime: "2021-06-25T14:24:17",
        PostName: "",
        projectName: "开发小程序",
        BusinessNo: "",
        MID: 177,
        ServiceType: "*信息技术服务*软件开发服务",
        WorkContent: "123",
        PerformanceFeeSettlementRules: "",
        Status: 0,
        SID: 0,
        ExportInResult: null,
        TskType: -1,
        TskStatus: 1,
        ServiceName: "",
        BegTime: "2021/6/25",
        EndTime: "2021/7/25",
        Amount: 10000,
        TAID: 0,
        attFileName: "",
        attFilePath: "",
        TskEmpFile: "",
        recruitPerson: 1,
        SettlementModes: 2,
        otherSettlementModes: "",
        RecruitmentRequirements: "123",
        checker: "高雄",
        checkstatus: 1,
        checkerId: 13,
        Reason: "",
      },
      invoiceSubjects: [],
    };
  },
  watch: {
    visible(newValue) {
      this.dialogClosed = newValue;
    },
    model(newValue) {
      this.addForm = newValue;
    },
  },

  created() {},
  methods: {
    async showAddDialog() {
      this.dialogClosed = true;
    },

    onSubmit(formName) {
      this.$refs[formName].validate(async (valided) => {
        if (!valided) {
          return;
        }
        try {
          // this.addForm.employee.empName = this.addForm.empName;
          console.log(this.addForm);
          let apiFullName = "";

          if (this.addForm.id || this.addForm.Id || this.addForm.ID) {
            apiFullName = this.api.edit;
          } else {
            apiFullName = this.api.create;
          }
          const response = await this.$http.post(apiFullName, this.addForm);
          console.log(response);
          //  this.reload();
        } catch (error) {
          console.error(error);
          if (error.data) {
            this.$message.error(error.data.Message);
          } else {
            this.$message.error("添加失败");
          }
        }
      });
    },
    onClose() {
      this.$emit("update:visible", false);
      this.$emit("close");
      this.dialogClosed = false;
    },
    async serviceContentChange(e) {
      console.log(e);
      this.addForm.InvoiceSubject = "";
      const response = await this.$http.get(
        `/api/Common/GetdictionaryItem?typenum=004&keywords=${e.name}`
      );
      this.invoiceSubjects = response.data.Data;
    },
    beforeClose(done) {
      this.onClose();
      done(true);
    },
  },
};
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
